import BackHeader from "@/components/BackHeader";
import { useLocation } from "react-router-dom";

const Detail = () => {
    const location = useLocation();
    const detailContent = location.state.data.content;
    return (
        <>
            <BackHeader />
            <div className="m-3">
                {!detailContent.img && (
                    <div className="w-full h-auto box-border rounded-sm overflow-hidden">
                        <img
                            src={location.state.data.imageUrl}
                            alt=""
                            className="w-full h-auto object-contain"
                        />
                    </div>
                )}
                {detailContent.img &&
                    detailContent.img.map((img: string, index: number) => {
                        return (
                            <div
                                key={index}
                                className="w-full h-auto box-border rounded-sm overflow-hidden"
                            >
                                <img
                                    src={img}
                                    alt=""
                                    className="w-full h-auto object-contain"
                                />
                            </div>
                        );
                    })}
                {detailContent.p &&
                    detailContent.p.map((p: string, index: number) => {
                        return (
                            <p
                                key={index}
                                className="text-lg/normal text-gray-900 my-3 indent-8"
                            >
                                {p}
                            </p>
                        );
                    })}
                <p className="mt-3 text-sm text-gray-600 text-end">
                    {location.state.data.author}
                    <span className="mx-2">|</span>
                    {location.state.data.date}
                </p>
            </div>
            <div
                className="absolute bottom-0 left-0 flex items-center justify-between box-border pl-2.5 pr-2.5 bg-white w-full h-[40px]"
                style={{ boxShadow: "0px -1px 3px 0px rgba(0,0,0,0.1)" }}
            >
                <div>
                    <i className="icon-[mdi--thumb-up]"></i>
                    10
                    <i className="icon-[mdi--comment]"></i>
                    12
                </div>
                <div>
                    <i className="icon-[mdi--heart-settings]"></i>
                    2
                    <i className="icon-[mdi--share-variant]"></i>
                </div>
            </div>
        </>
    );
};

export default Detail;
